<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Move</title>
    <style>
        #movable {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Center the element initially */
            transition: transform 0.3s ease; /* Smooth transition */
        }
        #controls {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        button {
            margin: 0 10px;
        }
    </style>
</head>
<body>
<div id="movable"></div>
<div id="controls">
    <button id="leftButton">Left</button>
    <button id="rightButton">Right</button>
</div>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        const movable = document.getElementById('movable');
        const leftButton = document.getElementById('leftButton');
        const rightButton = document.getElementById('rightButton');

        let currentPosition = 0;

        const moveElement = (delta) => {
            const rect = movable.getBoundingClientRect();
            const newPosition = currentPosition + (rect.width / 3) * delta;
            movable.style.transform = `translate(${newPosition}px, -50%)`; // Only change translateX
            currentPosition = newPosition;
        };

        leftButton.addEventListener('click', () => {
            moveElement(-1); // Move left
        });

        rightButton.addEventListener('click', () => {
            moveElement(1); // Move right
        });
    });
</script>
</body>
</html>